// component/dateRulerCanvas/dateRulerCanvas.js
let scaleRate = 1,
  timeGap = 30;
Component({
  /**
   * 组件的属性列表
   */
  subTimer: new Date(),
  properties: {
    width: {
      type: Number,
      value: 600,
    },
    height: {
      type: Number,
      value: 40,
    },
    totalWidth: {
      type: Number,
      value: 1000,
    },
    start: {
      type: String,
      value: (new Date((new Date()).getTime() - 5 * 1000 * 24 * 60 * 60)).toLocaleDateString()
    },
    end: {
      type: String,
      value: (new Date((new Date()).getTime() + 5 * 1000 * 24 * 60 * 60)).toLocaleDateString()
    },
    pointer: {
      type: String,
      value: (new Date()).toLocaleDateString()
    },

    scroll: {
      type: Number,
    },

    disable: {
      type: Boolean,
      value: false
    },
    uuid: {
      type: String,
    },
    interval: {
      type: Number,
      value: 40
    },

    hasPointer: {
      type: Boolean,
      value: false,
    },
    pointerX: {
      type: Number,
      value: 0
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    renderList: [],
    rulerList: [],
    maxRulerHeight: 10,
    fontSize: 20,
    rulerPointer: '',
    ctx: null,
    subTimer: new Date().getTime(),
    missionTimer: null,
  },
  lifetimes: {
    attached() {
      // this.reset(true);
    },
  },
  observers: {
    'start,end,totalWidth,width': function() {
      this.reset();
    },
    'uuid': function() {
      this.data.ctx = wx.createCanvasContext(this.data.uuid, this);
      scaleRate = wx.getSystemInfoSync().windowWidth / 750;
      this.requestRender();
    },
    'renderList,scroll': function() {
      this.requestRender();
    }
  },
  /**
   * 组件的方法列表
   */
  methods: {
    requestRender() {
      const time = new Date();
      if (time - this.data.subTimer > timeGap) {
        this.data.subTimer = time.getTime();
        const f = this.render()
        if (!f) {
          this.pushRenderQuest()
        }
      }
    },
    pushRenderQuest() {
      console.log('push quest')
      if (this.data.missionTimer) this.data.missionTimer = clearTimeout(this.data.missionTimer);
      this.setData({
        missionTimer: setTimeout(() => {
          if (!this.render()) {
            this.pushRenderQuest()
          }
          this.setData({
            missionTimer: null
          })
        }, 200)
      })
    },
    render() {
      if (!this.data.ctx) return false;
      // const borderColor = '#fff';
      const borderColor = '#99d6ba';
      // const fontColor = '#99d6ba';
      const fontColor = '#fff';
      this.data.ctx.clearRect(0, 0, this.data.width, this.data.height)
      this.data.ctx.strokeStyle = borderColor;
      this.data.ctx.fillStyle = fontColor;
      this.data.ctx.setFontSize(this.data.fontSize * scaleRate)
      const renderLeftRange = this.data.scroll / scaleRate;
      const renderRightRange = (this.data.scroll + this.data.width) / scaleRate;
      const startIndex = parseInt(this.data.scroll / this.data.interval * 10, 10);
      const startOffset = startIndex * (this.data.interval / 10) - this.data.scroll
      for (let index = 0; index < this.data.renderList.length; index++) {
        const date = this.data.renderList[index];
        const left = date.left;
        // const left = this.data.interval * index;
        if (left >= renderLeftRange - 50 && left <= renderRightRange + 20) {
          this.data.ctx.fillText(`${date.month}-${date.date}`, (left - renderLeftRange) * scaleRate, 18);
          this.data.ctx.lineWidth = 1;
          let height = this.data.maxRulerHeight;
          let color = '#50c48d';
          if (this.data.hasPointer && this.data.pointerX === left) {
            height = 30;
            color = '#f00'
          }
          this.data.ctx.strokeStyle = color;
          // this.data.ctx.fillStyle = color;
          this.data.ctx.beginPath();
          this.data.ctx.moveTo((left - renderLeftRange) * scaleRate - 1, 0);
          this.data.ctx.lineTo((left - renderLeftRange) * scaleRate - 1, height);
          this.data.ctx.closePath();
          this.data.ctx.stroke();

          this.data.ctx.lineWidth = 0.5;
          this.data.ctx.strokeStyle = borderColor;
          // this.data.ctx.fillStyle = '#bbb'
          this.data.ctx.beginPath();
          this.data.ctx.moveTo((left - renderLeftRange + this.data.interval / 2) * scaleRate - 1, 0);
          this.data.ctx.lineTo((left - renderLeftRange + this.data.interval / 2) * scaleRate - 1, this.data.maxRulerHeight / 2);
          this.data.ctx.closePath();
          this.data.ctx.stroke();
          // this.data.ctx.fill();
        } else if (left > renderRightRange + this.data.interval) {
          break;
        }
      }
      this.data.ctx.draw();
      return true;
    },
    reset(isFirst = false) {
      let renderList = [],
        interval = this.data.interval,
        fontSize,
        scrollX = this.data.scroll,
        toChangeScroll = false;
      const startDate = new Date(this.data.start).getTime();
      const endDate = new Date(this.data.end).getTime();
      for (let i = startDate, j = 0; i < endDate; i += 1000 * 60 * 60 * 24, j++) {
        const date = new Date(i);
        const [year, month, day] = [date.getFullYear(), (date.getMonth() + 1) % 13, date.getDate()];
        renderList.push({
          year,
          month,
          date: day,
          left: j * interval
          //   day,
        })
      }
      fontSize = this.data.width * interval * 0.001;
      if (fontSize < 20) fontSize = 20;
      if (fontSize > 30) fontSize = 30;
      this.setData({
        renderList,
        fontSize
      })
    }
  }
})